<template>
	<view>
		<view v-if="!isCreated" class="home-nc-content-box">
			<view class="top-box">
				<view class="add-box" @click="createDepClick">
					<image class="add-icon" src="../../../static/icon_home_add.png" mode="aspectFill"></image>
				</view>
				<view class="text1">
					创建科室
				</view>
				<view class="text2">
					如果您是护士长，请创建自己的科室
				</view>
			</view>
			<view class="item-box" v-for="item in itemData">
				<view class="title">
					{{item.title}}
				</view>
				<view class="desc">
					{{item.desc}}
				</view>
				<image class="arrow" src="../../../static/icon_arrow_right.png" mode="aspectFill"></image>
			</view>
		</view>
		<view v-else class="home-content-box">
			<view class="top-box">
				<view class="top1-box">
					<view class="sub-box">
						<view class="change-ks" @click="gotoMyDepartment">切换</view>
						<view class="qh-ks" @click="gotoDepartmentInfo">
							{{currentDepartment}}
						</view>
						<image class="qh-arrow" src="../../../static/icon_arrow_w.png" mode="aspectFill"></image>
					</view>
					<view class="sub-box">
						2021年8月
						<image class="select-date-icon" src="../../../static/icon_open_w.png" mode="aspectFill"></image>
					</view>
					<view class="sub-box pb-btn">
						排班管理
					</view>
				</view>
			</view>
			<view class="main-content">
				<view class="schedule-box">
					<ren-calendar class="rl-box" ref='ren' :markDays='markDays' :headerBar='false'
						@onDayClick='onDayClick'></ren-calendar>
					<view class="m-box">
						<view class="class-type">
							白班
						</view>
						<view class="class-time">
							23:00-次日07:30
						</view>
					</view>
					<view class="schedule-aciton-box">
						<view class="tag" @click="onSetShowPop('isShowRemarks', true)">
							<text class="tag-text">排班备注</text>
						</view>
						<view class="tag" @click="goToAllSchedule">
							<text class="tag-text">全科排班表</text>
						</view>
					</view>
				</view>
				<!-- 科室服务 -->
				<view class="service">
					<view class="service-title">科室服务</view>
					<view class="service-content">
						<view class="service-item" @click="gotoExpectedScheduling">
							<view class="service-item-img">
								<image src="@/static/tab/icon_heart.png" mode="aspectFill"></image>
							</view>
							<text class="service-item-text">期望排班</text>
						</view>
						<view class="service-item" @click="gotoShiftApplication">
							<view class="service-item-img">
								<image src="@/static/tab/icon_exchange.png" mode="aspectFill"></image>
							</view>
							<text class="service-item-text">调班申请</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<vant-popup closeable position="bottom" custom-style="height: 50%" :show="isShowRemarks"
				@close="onSetShowPop('isShowRemarks', false)">
				<view class="remarks-title">
					<!-- </text> -->
					排班备注(2021-10-25至2021-10-31)
					<!-- <text> -->
				</view>
				<view class="remarks-text">早班</view>
			</vant-popup>
		</view>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	import request from '@/http/index.js'
	import API from '@/api/const.js'
	
	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				isCreated: true,
				itemData: [{
					title: "推荐给护士长",
					desc: "如果您是护士，请推荐护士长来进行排班"
				}, {
					title: "体验排班",
					desc: "点击这里，开始体验"
				}],
				curDate: '',
				markDays: [],
				isShowRemarks: false, // 唤起排班备注弹窗
				currentDepartment: '外科'
			};
		},
		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);
			this.getSchedule({
				startTime: '2021-09-02',
				endTime: '2021-10-31'
			});
			// request('POST', API.POST_GETSCHEDUL, {
			// 	startTime: '2021-09-02',
			// 	endTime: '2021-10-31'
			// }).then(data => {
			// 	console.log('getSchedule:', data);
			// });
		},
		onTabItemTap() {
			this.getSchedule({
				startTime: '2021-09-02',
				endTime: '2021-10-31'
			});
		},
		methods: {
			createDepClick() {
				uni.navigateTo({
					url: '../../createDepartment/createDepartment'
				});
			},
			getSchedule(params) {
				request('POST', API.POST_GETSCHEDUL, params)
					.then(data => {
						console.log('getSchedule:', data);
					});
			},
			onDayClick(data) {
				this.curDate = data.date;
			},
			onChangeDepartment(e) {
				const {
					value
				} = e.detail;
				this.currentDepartment = value;
				this.onSetShowPop('isShowDepPop', false);
				// TODO: 重新请求排版数据
			},

			onSetShowPop(type, isShowed) {
				this[type] = isShowed;
			},

			// 跳转科室信息页
			gotoDepartmentInfo() {
				uni.navigateTo({
					url: `/pages/departmentInfo/departmentInfo?dp=${this.currentDepartment}`
				})
			},
			
			// 跳转我的科室列表页
			gotoMyDepartment() {
				uni.navigateTo({
					url: `/pages/myDepartment/myDepartment?dp=${this.currentDepartment}`
				})
			},
			
			// 跳转期望排班
			gotoExpectedScheduling() {
				uni.navigateTo({
					url: '/pages/tabBar/analysis/analysis'
				})
			},
			
			// 跳转调班申请
			gotoShiftApplication() {
				uni.navigateTo({
					url: '/pages/myApplication/list'
				})
			},
			
			// 展示排班备注
			showRemarks() {

			}
			

		}
	}
</script>

<style lang="less">
	view {
		box-sizing: border-box;
	}

	.home-nc-content-box {
		padding: 15rpx;

		.top-box {
			width: 100%;
			height: 280rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			border-radius: 6rpx;

			.add-box {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				background: linear-gradient(#0098f2, #00abff);
				display: flex;
				justify-content: center;
				align-items: center;

				.add-icon {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.text1 {
				font-size: 30rpx;
				color: #323233;
				margin-top: 10rpx;
			}

			.text2 {
				font-size: 24rpx;
				color: #AAAAAA
			}

		}

		.item-box {
			position: relative;
			padding: 30rpx;
			padding-right: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: #FFFFFF;
			margin-top: 30rpx;
			border-radius: 6rpx;

			.title {
				font-size: 30rpx;
				color: #323233;
			}

			.desc {
				font-size: 24rpx;
				color: #AAAAAA
			}

			.arrow {
				position: absolute;
				right: 30rpx;
				width: 50rpx;
				height: 42rpx;
			}
		}

	}

	.home-content-box {
		.main-content {
			position: relative;
			top: -28rpx;
			padding: 0 20rpx;

			.schedule-box {
				position: relative;
				background-color: #FFFFFF;
				padding: 16rpx;
				border-radius: 16rpx;

				// 日历
				.rl-box {
					margin-top: 20rpx;
					border: 10rpx;
				}

				// 班种显示
				.m-box {
					width: 100%;
					height: 160rpx;
					// display: flex;
					background-color: #FFFFFF;

					.class-type {
						font-size: 36rpx;
						font-weight: 500;
					}

					.class-time {
						color: #808080;
					}
				}

				// 侧边标签按钮
				.schedule-aciton-box {
					position: absolute;
					right: 0;
					bottom: 0;
					height: 176rpx;

					.tag {
						margin-bottom: 20rpx;
						text-align: right;

						&-text {
							padding: 10rpx 20rpx;
							font-size: 26rpx;
							border-top-left-radius: 26rpx;
							border-bottom-left-radius: 26rpx;
							text-align: center;
							background-color: #eeeeee;
							color: #4b4b4b;
							opacity: 0.8;
						}
					}
				}
			}

			.service {
				margin-top: 10rpx;
				border-radius: 16rpx;
				background-color: #FFFFFF;
				padding: 20rpx 0;
				&-title {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					padding: 0 20rpx;
				}
				
				&-content {
					display: flex;
					justify-content: space-around;
					align-items: center;
					flex-wrap: wrap;
					
					.service-item {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column ;
						
						&-img{
							display: flex;
							justify-content: center;
							align-items: center;
							height: 80rpx;
							width: 80rpx;
							border-radius: 40rpx;
							image {
								height: 50rpx;
								width: 50rpx;
							}
						}
						
						
						&-text {
							color: grey;
							font-size: 20rpx;
							text-align: center;
						}
					}
					
				}
			}

		}

		.top-box {
			width: 100%;
			height: 160rpx;
			position: relative;
			background: linear-gradient(#0098f2, #00abff);
			padding: 0rpx 20rpx;
			padding-top: 60rpx;

			.top1-box {
				width: 100%;
				padding-left: 10rpx;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				justify-content: space-between;
			}

			.sub-box {
				display: flex;
				align-items: center;

				.qh-ks {
					font-size: 30rpx;
				}

				.qh-arrow {
					width: 45rpx;
					height: 30rpx;
				}

				.change-ks {
					padding: 0 14rpx;
					margin-right: 10rpx;
					font-size: 26rpx;
					line-height: 40rpx;
					height: 40rpx;
					color: #FFF;
					border-radius: 20rpx;
					background-color: #8fd1f7b0;
				}
			}

			.select-date-icon {
				width: 40rpx;
				height: 40rpx;
			}

			.pb-btn {
				border: solid 2rpx #FFFFFF;
				border-radius: 38rpx;
				padding: 2rpx 16rpx;
				font-size: 28rpx;
			}
		}
	}

	.remarks-title {
		height: 100rpx;
		line-height: 100rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
		color: #808080;
		background-color: #EEEEEE;
		border-bottom: 1px solid #E2E2E2;
	}

	.remarks-text {
		font-size: 32rpx;
		padding: 30rpx;
	}
</style>
